import styled from 'styled-components'
import border from 'utils/border.js';

export const TuanStyle = styled.div`
flex:1;
overflow:hidden;
width:100%;
color: #424242;
background: #f5f5f5;

`



export const TuanNav = styled.div`
   width:100%;
   height:0.44rem;
   z-index: 2;
   overflow: hidden;
   background-color: #fff;
   position: fixed;
   left: 0px;
   top: 0px;

`


export const TuanNavOuter = styled.div`
   width:100%;
   height:0.44rem;
   overflow-x: scroll;
   overflow-y: hidden;
`


export const TuanNavInner = border({
   component : styled.div`
   width: 9.84rem;
   padding: 0 .2rem;
   white-space: nowrap;
   background: #fff;
   display:flex;
   align-items: center;
   justify-content: space-around;
   a{
      color: #666;
      display: inline-block;
      text-align: center;
      position: relative;
      font-size: .14rem;
      height: .44rem;
      line-height: .44rem;
      &.active{
         color: #fe4070;
         span{
            display: block;
            background: #fe4070;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: .02rem;
            border-top-left-radius: .0375rem;
            border-top-right-radius: .0375rem;
         }
      }
      span{
         display: none;
      }
   }
`,
   width : '0 0 1px 0',
   style : 'solid',
   color : '#eee',
   radius : 0,
})